<template>
  <div class="container full-screen" :style="themeStyle">
    <div class="back-img full-screen" :style="{ backgroundImage: `url(${backImage}` }"></div>
    <div class="mask full-screen"></div>
    <div class="main">
      <div class="header">
        <div class="date">{{ currDate }}</div>
        <div class="theme-switch">
          <i-switch
            value="light"
            true-value="light"
            false-value="dark"
            :true-color="dark.backColor"
            :false-color="light.backColor"
            @on-change="toggleTheme"
          >
            <div slot="open" :style="{ color: dark.fontColor, fontWeight: 'bold' }">亮</div>
            <div slot="close" :style="{ color: light.fontColor, fontWeight: 'bold' }">暗</div>
          </i-switch>
        </div>
      </div>
      <div class="body">
        <div class="hour">{{ currHour }}</div>
        <div class="minute">{{ currMinute }}</div>
        <div class="week-second">
          <div :class="['week', isWeekend ? 'weekend' : '']">{{ currWeek }}</div>
          <div class="second">{{ currSeconds }}</div>
        </div>
        <div class="leetcode">
          <div class="lc-wrap">
            <PieChart
              v-for="(t, i) in questionStatistList"
              :key="i"
              :class="['circle', t.name]"
              :backColor="t.color + '42'"
              :activeColor="t.color"
              :centerColor="themeStyle['--back-color']"
              :total="t.percent"
              :width="200 - i * 20"
            />
            <div class="descripe">
              <div class="line">
                <div class="label">T：</div>
                <div class="data">{{ acTotal }}</div>
              </div>
              <div
                v-for="(t, i) in questionStatistList"
                :key="i"
                class="line"
                :style="{ color: t.color }"
              >
                <div class="label">{{ getFirstWordUpperCase(t.name) }}：</div>
                <div class="data">{{ t.solvedNums }}</div>
              </div>
              <div class="rank">{{ siteRanking }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserInfo, getSolvedQuestion } from "./api/leetcode";
import PieChart from "./components/pie-bar.vue";
export default {
  name: "lively-wallpaper-theme",
  components: { PieChart },
  data() {
    return {
      backImage: "",
      light: {
        fontColor: "#596b77",
        backColor: "#ebf2f8",
        shadow: "5px 5px 10px #c8ced3, -5px -5px 10px #ffffff",
      },
      dark: {
        fontColor: "#c5cfd9",
        backColor: "#34393c",
        shadow: "5px 5px 10px #2c3033, -5px -5px 10px #3c4245",
      },
      themeStyle: {
        "--font-color": "",
        "--back-color": "",
        "--shadow": "",
      },
      siteRanking: "",
      acTotal: "",
      questionStatistList: [
        { color: "#2cbb5d", name: "easy", solvedNums: 0, total: 0, percent: 0 },
        { color: "#ffc01e", name: "medium", solvedNums: 0, total: 0, percent: 0 },
        { color: "#ef4743", name: "hard", solvedNums: 0, total: 0, percent: 0 },
      ],
      currHour: "",
      currMinute: "",
      currSeconds: "",
    };
  },
  computed: {
    currDate() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let res = `${year} / ${this.insertZero(month)} / ${this.insertZero(day)}`;
      return res;
    },

    currWeek() {
      const week = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      let date = new Date();
      let day = date.getDay();
      return week[day];
    },

    isWeekend() {
      let day = new Date().getDay();
      return day < 1 || day > 5;
    },
  },
  mounted() {
    let hash = window.location.hash.replace(/.*#/, "");
    getUserInfo(hash)
      .then(res => {
        const { userProfilePublicProfile: info } = res.data.data;
        this.siteRanking = info.siteRanking;
        this.acTotal = info.submissionProgress.acTotal;
      })
      .catch(err => {
        console.log(err);
      });

    getSolvedQuestion(hash)
      .then(res => {
        const {
          numAcceptedQuestions: ac,
          numFailedQuestions: fail,
          numUntouchedQuestions: unknown,
        } = res.data.data.userProfileUserQuestionProgress;

        for (let i = 0; i < 3; i++) {
          let total = ac[i].count + fail[i].count + unknown[i].count;
          this.questionStatistList[i].solvedNums = ac[i].count;
          this.questionStatistList[i].total = total;
          this.questionStatistList[i].percent = Math.floor((ac[i].count * 100) / total);
        }
      })
      .catch(err => {
        console.log(err);
      });

    this.$axios.get("/bing").then(res => {
      const { images } = res.data;
      this.backImage = `https://cn.bing.com${images[0].url}`;
    });

    this.toggleTheme("light");

    this.timer = setInterval(() => {
      let date = new Date();
      this.currHour = this.insertZero(date.getHours());
      this.currMinute = this.insertZero(date.getMinutes());
      this.currSeconds = this.insertZero(date.getSeconds());
    }, 200);

    this.$once("hook:beforeDestory", () => {
      clearInterval(this.timer);
      this.timer = null;
    });
  },
  methods: {
    toggleTheme(type) {
      for (let key in this[type]) {
        let kebabKey = "--" + this.getKebabCase(key);
        this.themeStyle[kebabKey] = this[type][key];
      }
    },

    getKebabCase(str) {
      return str.replace(/[A-Z]/g, i => `-${i.toLowerCase()}`);
    },

    getFirstWordUpperCase(str) {
      if (str.length === 0) return;
      return str[0].toUpperCase();
    },

    insertZero(str, len = 2) {
      return String(str).padStart(len, "0");
    },
  },
};
</script>

<style scoped lang="less">
.full-screen {
  position: absolute;
  inset: 0;
}

.container {
  --border-radius: 8px;
  --border-width: 4px;
  --border-color: #ccc;

  // theme light
  // --font-color: #596b77;
  // --back-color: #ebf2f8;
  // --shadow: 5px 5px 10px #c8ced3, -5px -5px 10px #ffffff;

  // theme dark
  // --font-color: #c5cfd9;
  // --back-color: #34393c;
  // --shadow: 5px 5px 10px #2c3033, -5px -5px 10px #3c4245;

  .back-img {
    background-size: cover;
    background-position: center;
  }

  .mask {
    background: #00000060;
  }
}

.main {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-color: var(--back-color);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  border-radius: var(--border-radius);

  padding: 20px;
  display: flex;
  flex-direction: column;

  color: var(--font-color);
  font-family: "Helvetica Neue", Helvetica, sans-serif;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 2em;
  }

  .body {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;

    .hour,
    .minute,
    .leetcode {
      width: 220px;
      height: 220px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12em;
      border-radius: var(--border-radius);
      box-shadow: var(--shadow);
    }

    .week-second {
      width: 120px;
      height: 220px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      font-size: 2em;

      & > div {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow);
      }

      .week {
        width: 120px;
        height: 60px;

        &.work {
          color: orange;
        }

        &.weekend {
          color: #70d470;
        }
      }

      .second {
        width: 120px;
        height: 120px;
        font-size: 3em;
      }
    }

    .leetcode .lc-wrap {
      position: relative;
      width: 100%;
      height: 100%;

      .circle {
        position: absolute;
      }

      .easy {
        left: 10px;
        top: 10px;
      }

      .medium {
        left: 20px;
        top: 20px;
      }

      .hard {
        left: 30px;
        top: 30px;
      }
    }

    .leetcode .descripe {
      position: absolute;
      inset: 55px;
      font-size: 16px;

      .line {
        display: flex;
        justify-content: center;
        font-style: italic;
        font-weight: bold;
      }

      .rank {
        text-align: center;
        font-size: 14px;
        font-style: italic;
        opacity: 0.5;
      }
    }
  }
}
</style>
